<template>
  <div id="app">
      <ul-li :file="file"></ul-li>
      <ul>
          <li @click="view = 'navList'">菜单</li>
          <li @click="view = 'prize'">评价</li>
          <li @click="view = 'shop'"> 商家</li>
      </ul>
      <keep-alive exclude="navList">
        <component :is="view"></component>
      </keep-alive>

      <div id="demo">
        <button v-on:click="show = !show">
            Toggle
        </button>
        <transition 
            enter-active-class="animated tada"
            leave-active-class="animated bounceOutRight"
        >
            <p v-show="show">hello</p>
        </transition>
     </div>
  </div>
</template>

<script>
import ulLi from './components/ul-li'
import navList from './components/navList'
import prize from './components/prize'
import shop from './components/shop'
export default {
    components:{
       ulLi,
       navList,
       prize,
       shop
    },
    created(){
        this.$http.get('/api/file').then(res =>{
            if(res.data.code === 1){
                this.file = res.data.data;
                console.log(this.file)
            }
        })
    },
    data(){
        return {
            file:[],
            view:'prize',
            show:false
        }
    }
}
</script>

<style lang="scss">
    @import './assets/animate.css';
    p{
        width:100px;
        height:100px;
        background: red;
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }

    .bounce-enter-active {
        animation: bounce-in .5s;
        }
        .bounce-leave-active {
        animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
        }
</style>
